<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .header {
        height: 100px;
        background-color: green;
      }

      .main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 2;
        height: calc(100vh - 100px);
        background-color: hotpink;
      }

      .aside {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex: 1;
        height: calc(100vh - 100px);
        background-color: aqua;
      }

      .article {
        height: 100px;
        background-color: blue;
      }

      .item {
        height: 100px;
        background-color: bisque;
      }

      .container {
        display: flex;
      }
    </style>
  </head>

  <body>
    <!-- 
      组件的局部注册与全局注册

        全局注册的组件在任意组件中都可以使用。
        局部注册的组件注册在谁身上，就只能在谁身上使用。

     -->

    <div id="app">
      <my-item></my-item>

      <hr />

      <my-header></my-header>

      <div class="container">
        <!-- 
          PS: 组件的开始标签与闭合标签中的内容默认是不会渲染的。【后续有插槽技术】
          <my-main>
            <my-article></my-article>
            <my-article></my-article>
          </my-main>
         -->
        <my-main></my-main>

        <my-aside></my-aside>
      </div>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      const app = createApp({});

      const MyHeader = {
        template: `
          <header class="header"></header>
        `,
      };

      const MyMain = {
        template: `
          <main class="main">
            
            <my-article></my-article>
            <my-article></my-article>
            
          </main>
        `,
      };

      const MyItem = {
        template: `
          <div class="item"></div>
        `,
      };

      const MyAside = {
        components: {
          // 局部注册 MyItem 组件
          MyItem: MyItem,
        },

        template: `
          <div class="aside">
            <my-item></my-item> 
            <my-item></my-item>
            <my-item></my-item>
          </div>
        `,
      };

      const MyArticle = {
        template: `
          <div class="article"></div>
        `,
      };

      app.component("MyHeader", MyHeader);
      app.component("MyMain", MyMain);
      app.component("MyAside", MyAside);
      app.component("MyArticle", MyArticle);
      // app.component("MyItem", MyItem);

      // 挂载应用
      app.mount("#app");
    </script>
  </body>
</html>
